<template>
    <div class="box">
        <header>
            <i class="i_down">廊坊<img class="down" src="https://p0.meituan.net/travelcube/45c79a92755b54adc9dc1c4682b123b3201.png" alt=""></i>
            <input type="text" class="search" value="请输入商家名、品类或者商圈">
            <span><img src="https://p0.meituan.net/travelcube/641521461179df7cfb88738dd1ea11ec1031.png" alt="" ></span>
        </header>
        <!-- 轮播图
        <div class="lbt">
            <swiper :options="swiperOption">
                <swiper-slide v-for="slide in swiperSlides" :key="slide.id" class="liimg"><img :src="slide.src">
                </swiper-slide>
                <p class="swiper-pagination" slot="pagination"></p></swiper>
        </div> -->
        <!--  -->
        <!-- 京东超市 -->
        <!-- <div class="goods_list">
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/175540/24/19329/6842/60ec0b0aEf35f7384/ec560dbf9b82b90b.png" alt="">
                <span>京东超市</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/178015/31/13828/6862/60ec0c04Ee2fd63ac/ccf74d805a059a44.png" alt="">
                <span>数码电器</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/54043/33/19389/4660/62b049dbE3b9aef75/2fcd31afd5d702e4.png" alt="">
                <span>京东新百货</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/177902/16/13776/5658/60ec0e71E801087f2/a0d5a68bf1461e6d.png" alt="">
                <span>京东生鲜</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/196472/7/12807/7127/60ec0ea3Efe11835b/37c65625d94cae75.png" alt="">
                <span>京东到家</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/185733/21/13527/6648/60ec0f31E0fea3e0a/d86d463521140bb6.png" alt="">
                <span>充值缴费</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/34248/39/16616/4689/62bbbdccE9f11132e/d51caf15f2f412b2.png" alt="">
                <span>附近好店</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/186080/16/13681/8175/60ec0fcdE032af6cf/c5acd2f8454c40e1.png" alt="">
                <span>领券</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/37709/6/15279/6118/60ec1046E4b5592c6/a7d6b66354efb141.png" alt="">
                <span>PLUS会员</span>
            </div>
            <div class="item">
                <img src="https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png" alt="">
                <span>京东国际</span>
            </div>
        </div> -->
    </div>
    
  </template>
  
  <script>
  //import 'swiper/dist/css/swiper.css'
  //import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    components:{  
    }
  }
  </script>
  <style lang="less" scoped>
    *{
        margin: 0;
        padding: 0 auto;
    }
    header {
        width: 375px;
        height: 50px;
        padding-left: 15px;
        padding-right: 15px;
        display: flex;
        align-items: center;
        background-color: #FFCA00;
        i{
            font-size: 12px;
            .down{
                width: 7px;
                color: #fff;
                margin-left: 5px;
                margin-right: 5px;
            }
        }
        .search {
            padding-left: 40px;
            font-size: 0.4rem;
            flex: 1;
            height: 32px;
            color: #A39D8A;
            border-radius: 0.26667rem;
            background: #FFFAE6 url(https://p0.meituan.net/travelcube/99c29829cf1b85d5cdbc76a1bd0b7329814.png) no-repeat;
            background-position: 9px 11px;
            background-size: 14px 14px;
        }
        span img{
            width: 24px;
            padding: 0 0.4rem;
            color: #fff;
        }
    }
    // .lbt{
    //     width: 100%;
    //     height: 200px;
    //     .liimg img{
    //         width: 100%;
    //         height: 200px;
    //     }
    // }
// .goods_list {
//   display: flex;
//   height: 3.46667rem;
//   flex-wrap: wrap;
//   padding: 0.26667rem 0;
// }

// .goods_list .item {
//   width: 20%;
//   display: flex;
//   flex-direction: column;
//   justify-content: center;
//   align-items: center;
// }

// .goods_list img {
//   width: 0.8rem;
// }

// .goods_list span {
//   font-size: 0.34667rem;
//   padding-top: 0.13333rem;
// }
  </style>